<template>
	<view class="storeManage">
		<view class="store-left">
			<view class="store-nav" v-for="(item, index) in navLeft" :key="item.id"
				:class="{active: index === navLeftIndex}" @click="changeNav(item,index)">
				{{item.name}}
			</view>
		</view>
		<view class="store-right">
			<mescroll-body ref="mescrollRef" top="30" height="100%" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :down="downOption" :up="upOption">
				<view class="right-item" v-for="(item , index) in rightArr" :key="index">
					<view class="images">
						<image :src="$wanlshop.oss(item.image)" mode=""></image>
					</view>
					<view class="store-center">
						<view class="store-name">{{item.title}}</view>
						<view class="store-integral">{{item.price}}积分起</view>
					</view>
					<view class="store-option">
						<view class="putaway" @click="putaway(item)">{{item.grounding? '下架' :'上架'}}</view>
						<view @click="setInventory(item,index)">设置库存</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 库存设置 -->
		<view class="bg" v-if="show">
			<view class="pop-up">
				<image src="../../static/images/shop/shopClose.png" mode="" class="closeIcon" @click="show=false">
				</image>
				<h3 class="u-padding-bottom-30">库存设置</h3>
				<!-- <input type="number" v-model="inventoryNum" placeholder="请设置库存总量">
				<view class="inventoryTotal">
					产品现有库存总量为300件。
				</view> -->
				<view class="shop-sku" v-for="(item, index) in skuList" :key="item.id">
					<view class="sku-left">
						<view class="u-margin-bottom-29">规格：{{item.difference.toString()}}</view>
						<view class="u-margin-bottom-29">发布时间：{{$wanlshop.timeFormat(item.createtime)}}</view>
						<view class="u-margin-bottom-29">原价：<text class="text-decoration">{{item.market_price}}</text>
							<text class="currentPrice">现价：{{item.price}}积分</text>
						</view>
					</view>
					<view class="sku-right">
						<view class="u-margin-bottom-12"> 库存：{{item.shop_stock}}件 </view>
						<u-number-box v-model="value[index]" @change="valChange(event, item, index)"></u-number-box>
					</view>
				</view>
				<view class="sure" @click="sure">
					确认
				</view>
			</view>
		</view>

		<!-- 上架or下架成功 -->
		<view class="bg" v-if="isSuccess">
			<view class="store-success">
				<view class="store-title">{{grounding?'上架成功':'下架成功'}}</view>
				<image src="../../static/images/shop/bg-2.png" mode="" class="success-icon"></image>
				<view class="store-ok" @click="handleOk">
					好的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				skuList: [], // 库存数据
				skuEidtList: [], // 库存修改后的列表
				skuEidtListOfId: [], // 修改库存列表id
				skuEidtListOfValue: [], // 修改库存列表值
				goodsId: '',
				grounding: 0,
				show: false,
				navLeftIndex: 0,
				inventoryNum: 0,
				isSuccess: false,
				value: [0, 0, 0, 0],
				navLeft: [],
				inventoryNum: 0,
				curPageLen: 0,
				totalPage: 0,
				page: 1,
				mescroll: null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					// onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 0, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~空空如也~' // 提示
					},
					textNoMore: '已经到底啦!'
				},
				rightArr: []
			};
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页  
			this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false

		},
		onLoad() {
			this.getShopName()
		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		watch: {
			goodsId(val1, val2) {
				console.log(val1, val2)
				if (val2 !== val1) {
					this.rightArr = []
				}
			}
		},
		methods: {
			// 获取左侧商品分类
			getShopName() {
				this.$api.post({
					url: '/wanlshop.shop/categorygoodslist',
					success: res => {
						this.navLeft = res
						this.getShopList(this.navLeft[this.navLeftIndex])
					}
				})
			},
			// 获取右侧数据
			getShopList(item) {
				this.goodsId = item.id
				let data = {
					category_id: item.id,
					page: this.page,
					limit: 10
				}
				this.$api.post({
					url: '/wanlshop.shop/goodsList',
					data,
					success: res => {
						// console.clear()
						// console.log(res)
						this.rightArr = [...this.rightArr, ...res.list]
						this.mescroll.endSuccess(res.list.length)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr(this.goodsId)
					}
				})
			},
			// 上架
			putaway(item) {
				const that = this
				console.log(item)
				this.grounding = item.grounding ? 0 : 1
				this.$api.post({
					url: '/wanlshop.shop/shopOffShelf',
					data: {
						goods_id: item.id,
						to_shop_id: uni.getStorageSync('userShopId'),
						// grounding: this.grounding, //下架状态 0-不下架（上架） 1-下架|
					},
					success: res => {
						// let grounding = item.grounding?0:1
						that.isSuccess = true
						that.rightArr.forEach(ele => {
							if (ele.id === item.id) {
								ele.grounding = that.grounding
							}
						})
						that.$nextTick()
						console.clear()
						console.log(that.rightArr)
						// this.getShopList()
					}
				})
			},
			handleOk() {
				this.isSuccess = false
			},
			// 提交更改库存
			sure() {
				const that = this
				this.skuEidtList.forEach(item => {
					this.skuEidtListOfId.push(item.id)
					this.skuEidtListOfValue.push(item.value)
				})
				let data = {
					sku_id: this.skuEidtListOfId.toString(),
					to_shop_id: uni.getStorageSync('userShopId'),
					stock: this.skuEidtListOfValue.toString()
				}
				this.$api.post({
					url: '/wanlshop.shop/shopEditStock',
					data,
					success: res => {
						that.$u.toast('修改成功！')
					}
				})
				this.show = false
			},
			// 得到库存数量
			setInventory(item, index) {
				this.skuEidtListOfId = []
				this.skuEidtListOfValue = []
				this.skuEidtList = []
				this.value = []
				this.show = true
				this.$api.post({
					url: '/wanlshop.shop/getGoodsSku',
					data: {
						goods_id: item.id,
						to_shop_id: uni.getStorageSync('userShopId'),
					},
					success: res => {
						this.skuList = res
						this.value = new Array(res.length + 1).join('0').split('').map(parseFloat)
					}
				})
			},

			changeNav(item, index) {
				this.navLeftIndex = index
				this.getShopList(item)
				// this.mescroll.resetUpScroll()
			},
			/*下拉刷新的回调 */
			downCallback() {
				// this.mescroll.scrollTo(0, 0)
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				this.page = page.num
				if (page.num == 1) this.rightArr = []
				if (this.navLeft.length > 0) {
					await this.getShopList(this.navLeft[this.navLeftIndex])
					// this.mescroll.endByPage(curPageLen, totalPage); 
				}
			},
			// 库存数组改变时
			valChange(e, item, index) {
				const that = this
				if (this.skuEidtList.length === 0) {
					this.skuEidtList.push({
						id: item.id,
						value: that.value[index]
					})
				}
				let isIn = this.skuEidtList.findIndex(ele => {
					return ele.id === item.id
				})
				if (isIn !== -1) {
					console.log(this.value[index])
					this.skuEidtList[isIn].value = this.value[index]
				} else {
					this.skuEidtList.push({
						id: item.id,
						value: this.value[index]
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.storeManage {
		padding-top: 30rpx;
		display: flex;

		.store-left {
			background-color: #F4F4F4;
			width: 177rpx;
			// height: 927rpx;
			// min-height: 927rpx;
			height: calc(100vh - 30rpx);
			overflow-y: auto;

			.store-nav {
				padding: 30rpx 0;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.active {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ED6247;
			}
		}

		.store-right {
			padding: 0 21rpx;
			height: calc(100vh - 30rpx);
			overflow-y: auto;

			.right-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.images {
					width: 156rpx;
					height: 156rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.store-center {
					display: flex;
					flex-direction: column;
					margin: 0 54rpx 0 21rpx;

					.store-name {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 49rpx;
					}

					.store-integral {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ED6247;
					}
				}

				.store-option {
					view {
						width: 140rpx;
						height: 48rpx;
						text-align: center;
						line-height: 48rpx;
						background: #ED6247;
						border-radius: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.putaway {
						margin-bottom: 20rpx;
					}

				}
			}
		}

		.bg {
			background-color: rgba(0, 0, 0, .45);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.pop-up {
				width: 660rpx;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				padding: 34rpx 0 22rpx 0;
				z-index: 9999;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				border-radius: 60rpx;

				.closeIcon {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: -48rpx;
					right: 0;
				}

				h3 {
					width: 100%;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					text-align: center;
					margin-bottom: 38rpx;
					border-bottom: 1px solid #DCDCDC;
				}

				.shop-sku {
					width: 100%;
					padding: 10rpx 28rpx 0rpx 28rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 1px solid #DCDCDC;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;

					.sku-left {
						margin-right: 61rpx;

						.u-margin-bottom-29 {
							margin-bottom: 29rpx;
						}

						.currentPrice {
							margin-left: 30rpx;
							text-indent: 8rpx;
						}

						.text-decoration {
							text-decoration: line-through;
						}
					}

					.sku-right {}
				}

				.inventoryTotal {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin: 36rpx 0 29rpx 0;
				}

				input {
					width: 260rpx;
					border: 2rpx solid #DCDCDC;
					padding-left: 19rpx;
				}

				.sure {
					width: 260rpx;
					height: 66rpx;
					text-align: center;
					line-height: 66rpx;
					background: #FF4400;
					border-radius: 33rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 55rpx;
				}
			}

			.store-success {
				width: 469rpx;
				height: 455rpx;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				.success-icon {
					width: 469rpx;
					height: 455rpx;
					position: absolute;
				}

				.store-title {
					font-size: 36rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					position: absolute;
					top: 44rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 999999999999;
				}

				.store-ok {
					width: 235rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #3199FF;
					box-shadow: 0px 8rpx 12rpx 6rpx rgba(0, 101, 196, 0.16);
					border-radius: 29rpx;
					font-size: 23rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					position: absolute;
					left: 50%;
					bottom: 44rpx;
					transform: translateX(-50%);
				}
			}

		}
	}
</style>
